<template>
  <span @click="getFillDoctors">
    <slot>
      <div v-if="doctor.doctorName">
        <img slot="right" width="22" class="v-middle" src="../assets/wzjl/icon_zxwz_doctor.png" />
        <span slot="right" class="selcolor">{{doctor.doctorName}}</span>
      </div>
      <div v-else class="color-subtext">
        <span class="chose">{{showText||'点击选择 >'}}&ensp;</span>
        <!-- <i class="iconfont icon-small-arrow-right t3 v-middle" ></i> -->
      </div>
    </slot>
    <mu-popup
      position="right"
      popupClass="demo-popup-right"
      :open="rightPopup"
      @close="close()"
      class="popRight"
    >
      <empty v-if="doctors.length === 0"></empty>
      <ul class="doctorList" v-else>
        <li
          class="flex flex_vcenter"
          v-for="(item,index) in doctors"
          @click="goSelDoctor(item)"
          :key="index"
        >
          <img v-lazy="item.header" alt />
          <!-- <div class="ostatus" v-if="item.online==1">在线</div> -->
          <div class="flex_full">
            <div class="flex flex_between pr10">
              <div>
                <span class="docName">{{item.doctorName||""}}</span>
                <span class="doctor_title" v-if="item.doctorTitle">{{item.doctorTitle}}</span>
              </div>
              <div class="doctor_price">
                <div v-if="Number(item.returnVisitFee) < Number(item.returnVisitPrimitiveFee)">
                  <div>
                    <span>{{item.returnVisitFee > 0 ? item.returnVisitFee + "元/次" : "免费"}}</span>
                  </div>
                  <div class="origin_price">
                    <span>{{item.returnVisitPrimitiveFee > 0 ? item.returnVisitPrimitiveFee + "元/次" : "免费"}}</span>
                  </div>
                </div>
                <div v-else>
                  <div>
                    <span>{{item.returnVisitPrimitiveFee > 0 ? item.returnVisitPrimitiveFee + "元/次" : "免费"}}</span>
                  </div>
                </div>
              </div>
              <!-- <span class="borderBtn" v-if="item.imageAbleFlag==1">咨询</span>
                <span class="borderBtn" v-if="item.returnVisitFlag==1">处方</span>
                <span class="borderBtn" v-if="item.telephoneFlag==1">电话</span>
              <span class="borderBtn" v-if="item.videoFlag==1">视频</span>-->
            </div>
            <div class="text-gray">
              <span>{{item.orgName||""}}</span>
              <span>{{item.departmentName||""}}</span>
            </div>
            <div>
              <span>
                <img
                  src="../assets/images/icon_common_star1@3x.png"
                  style="width: 12px; height:12px;margin-right: 0;"
                  alt
                />
              </span>
              <span>{{item.score}}</span>
              <span class="pl10 t3">接诊量 {{item.visitingVolume}}</span>
            </div>
            <div class="text-gray">
              <span class="goodAt">擅长</span>
              <span>{{ (item.expert ||"暂无") | overText}}</span>
              <span></span>
            </div>
          </div>
        </li>
      </ul>
    </mu-popup>
  </span>
</template>

<script>
import empty from "@/components/empty";
import { commonAjaxJson, RESTFUL_API } from "../api/api";

export default {
  components: { empty },
  props: ["departmentId", "showText"],
  mounted() {},
  filters: {
    overText(val) {
      if (val.length > 15) {
        return val.substr(0, 15) + "……";
      } else {
        return val;
      }
    }
  },
  data() {
    return {
      rightPopup: false,
      doctor: {},
      doctors: []
    };
  },
  methods: {
    getFillDoctors() {
      this.rightPopup = true;
      commonAjaxJson(
        RESTFUL_API.getFillDoctors,
        {
          departmentId: this.departmentId,
          hospitalCode: sessionStorage.hospitalCode || "",
          busType: 2
        },
        true
      ).then(res => {
        if (res.data.data && res.data.data.length > 0) {
          this.doctors = res.data.data
        } else {
          this.$store.commit('UPDATE_TOAST', {
            message: '没有查询到医生',
            fn:() => {
              this.close()
            }
          })
          this.doctors = [];
        }
      });
    },
    close() {
      this.rightPopup = false;
    },
    goSelDoctor(item) {
      this.doctor = item;
      this.$emit("change", item);
      this.rightPopup = false;
    }
  }
};
</script>

<style lang="less">
@import "../common/css/component";
@import "../common/css/flex.css";

.doctorList {
  width: 100%;
  .doctor_title {
    font-size: 12px;
    color: #f60;
    border-radius: 16px;
    border: 1px solid #f60;
    padding: 0 4px;
  }
  .doctor_price {
    color: #f60;
    font-size: 14px;
    text-align: right;
  }
  .origin_price {
    color: #ccc;
    font-size: 12px;
    text-decoration: line-through;
  }
  .goodAt {
    font-size: 12px;
    background-color: #ffac29;
  }
}

.color-subtext {
  color: #999;
}
.demo-popup-right {
  display: flex;
  width: 100%;
  height: 100%;
  // max-width: 360px;
}

.mu-popup {
  .not-found {
    width: 100%;
  }
}

.shadow {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}
</style>
